<template>
  <div class="app-container">
    <el-card class="box-card" style="min-height: 80vh">
      <div slot="header" class="clearfix">

        <!-- 头部左侧 -->
        <div class="media-display">
          <el-link :underline="false" style="font-size: 20px">产品列表</el-link>
          <el-divider direction="vertical"></el-divider>
          <el-link :underline="false" style="font-size: 20px">要查询的类别：</el-link>
          <el-button size="small" :type="condition.category.phone ? 'warning' : 'info'" plain @click="choice($event.target,1)">手机</el-button>
          <el-button size="small" :type="condition.category.computer ? 'primary' : 'info'" plain @click="choice($event.target,2)">电脑</el-button>
          <el-button size="small" :type="condition.category.camera ? 'success' : 'info'" plain @click="choice($event.target,3)">智能硬件</el-button>
          <el-button size="small" :type="condition.category.accessory ? 'danger' : 'info'" plain @click="choice($event.target,4)">配件</el-button>
          <el-divider direction="vertical"></el-divider>
          <el-button size="small"  @click="preheat" plain>预热商品信息</el-button>
        </div>

        <!-- 头部右侧 -->
        <div style="margin-left: auto">
          <el-form :inline="true" :model="condition" class="demo-form-inline">
            <el-form-item label="产品名称">
              <el-input v-model="condition.name" placeholder="产品名称"></el-input>
            </el-form-item>
            <el-form-item label="产品状态">
              <el-select v-model="condition.state"  placeholder="请选择状态">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="success" plain @click="init">查询</el-button>
              <el-button style="margin-left: 10px" type="primary" plain @click="viewAll">全部产品</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <!-- 内容 -->
      <div class="text">
        <el-table
          v-loading="listLoading"
          highlight-current-row
          :data="page.list"
          style="width: 100%">
          <!-- 展开行 -->
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="商品 ID">
                  <span>{{ props.row.productId }}</span>
                </el-form-item>

                <el-form-item label="商品名称">
                  <span v-if="props.row.name===undefined">暂无</span>
                  <span v-else>{{ props.row.name }}</span>
                </el-form-item>

                <el-form-item label="类别 ID">
                  <span>{{ props.row.categoryId }}</span>
                </el-form-item>
                <el-form-item label="品牌 ID">
                  <span>{{ props.row.brandId }}</span>
                </el-form-item>
                <el-form-item label="类别">
                  <el-tag style="cursor: pointer;width: 60px;text-align: center"
                          :type="props.row.categoryId === 1 ? 'warning':
                        (props.row.categoryId === 2 ? 'primary' : 'success')">
                    <span>{{ props.row.categoryId | categoryFilter}}</span>
                  </el-tag>
                </el-form-item>
                <el-form-item label="商品描述">
                  <span>{{ props.row.describe }}</span>
                </el-form-item>
                <el-form-item label="价格">
                  <span v-if="props.row.price===undefined">暂无</span>
                  <span v-else>{{ props.row.price }}</span>
                </el-form-item>
                <el-form-item label="商品标题">
                  <span>{{ props.row.title }}</span>
                </el-form-item>
                <el-form-item label="商品详情" show-overflow-tooltip>
                  <span>{{ props.row.detail }}</span>
                </el-form-item>
                <el-form-item label="商品属性">
                  <span>{{ props.row.attributeList }}</span>
                </el-form-item>
                <el-form-item label="创建时间">
                  <span>{{ props.row.createTime | timestampToTime}}</span>
                </el-form-item>
                <el-form-item label="更新时间">
                  <span>{{ props.row.updateTime | timestampToTime}}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column
            type="index"
            :index="(this.page.currentPage-1)*this.page.pageSize + 1"
            width="50">
          </el-table-column>
          <el-table-column
            width="180"
            label="商品主图">
            <template slot-scope="scope">
              <!--<img src="/static/k50.jpg" alt="主图" width="100px">-->
              <img :src="prefix + scope.row.mainImg" alt="主图" width="100px">
            </template>
          </el-table-column>
          <el-table-column
            width="180"
            label="商品 ID"
            prop="productId"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            width="100"
            label="品牌 ID"
            prop="brandId">
          </el-table-column>
          <el-table-column
            width="200"
            label="商品名称"
            prop="name">
          </el-table-column>
          <el-table-column
            width="100"
            label="价格"
            prop="price">
          </el-table-column>
          <el-table-column
            width="200"
            label="商品描述"
            prop="describe"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            width="100"
            label="类别">
            <template slot-scope="scope">
              <div slot="reference" class="name-wrapper" >
                <el-tag style="cursor: pointer;width: 60px;text-align: center"
                        :type="scope.row.categoryId === 1 ? 'warning':
                        (scope.row.categoryId === 2 ? 'primary' : 'success')">
                  <span>{{ scope.row.categoryId | categoryFilter}}</span>
                </el-tag>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            width="200"
            align="center"
            label="状态(锁定/正常)">
            <template slot-scope="scope" >
              <el-popconfirm
                confirm-but ton-text='好的'
                cancel-button-text='不用了'
                icon="el-icon-info"
                icon-color="red"
                title="是否更改商品状态？"
                @onConfirm="modifyProductState(scope.$index,scope.row.productId,scope.row.state)">
                <el-switch
                  slot="reference"
                  disabled
                  v-model="scope.row.state"
                  :active-value="1"
                  :inactive-value="0">
                </el-switch>
              </el-popconfirm>
            </template>
          </el-table-column>

          <el-table-column
            label="操作">
            <template slot-scope="scope">
              <el-button size="small" type="primary" @click="gotoDetail(scope.row.productId)">详情</el-button>
              <!--<el-button slot="reference" size="small" type="danger" @click="open()">删除</el-button>-->
            </template>

          </el-table-column>
        </el-table>

        <!--分页-->
        <el-pagination style="text-align: center"
                       @current-change="handleCurrentChange"
                       :current-page="this.page.currentPage"
                       :page-size="this.page.pageSize"
                       layout="total, prev, pager, next, jumper"
                       :total="this.page.total">
        </el-pagination>
      </div>
    </el-card>

  </div>
</template>


<script>
  import { getProductList, modifyProductStateReq, preheatReq } from '@/api/product'
  import settings from '@/settings'

  export default {
    name: "ProductList",
    data(){
      return{
        prefix : settings.prefix || '/product-mainImg/phone/xiaomi/k50.jpg',// 全局前缀
        options: [{
          value: '0',
          label: '封禁'
        }, {
          value: '1',
          label: '正常'
        }],
        listLoading: true,// 表格loading
        page : {},

        condition: {// 搜索条件
          category: {// 存放要搜索的分区id
            phone: true,
            computer: true,
            camera: true,
            accessory: true,
          },
          name : '',// 产品名称
          state : '',// 产品状态
          currentPage: 1,// 当前页默认为1
        },
      }
    },
    methods : {
      open(){
        this.$confirm(`此操作将验证, 是否继续？`, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
      },
      preheat(){//初始化数据
        preheatReq().then(response => {
          if (response.state === true) {
            this.$notify.success({title: '成功',message: response.message, duration: 1500});
          }else{
            this.$notify.warning({title: '失败',message: response.message, duration: 1500});
          }
        })
      },
      init(){//初始化数据
        console.log(Object.values(this.condition.category))
        if (!Object.values(this.condition.category).includes(true)){
          this.$message.warning({message: '至少选择一个类别'})
          return;
        }
        this.listLoading = true
        getProductList({ condition : this.condition }).then(response => {
          console.log(response)
          if (response.state === true) {
            this.page = response.data.page
            this.listLoading = false
            this.$notify.success({title: '成功',message: response.message, duration: 1500});
          }else{
            this.$notify.warning({title: '失败',message: response.message, duration: 1500});
          }
        })
      },
      handleCurrentChange(currentPage){//处理分页数据
        this.condition.currentPage = currentPage;
        this.init()
      },
      viewAll(){//查看全部用户
        Object.assign(this.$data.condition, this.$options.data().condition);
        this.init();
      },
      handleState(){
        console.log(this.condition)
      },
      choice(event, categoryId){
        switch (categoryId) {
          case 1 : this.condition.category.phone = !this.condition.category.phone;break;
          case 2 : this.condition.category.computer = !this.condition.category.computer;break
          case 3 : this.condition.category.camera = !this.condition.category.camera;break
          case 4 : this.condition.category.accessory = !this.condition.category.accessory;break
        }
        if(event.nodeName === 'SPAN' || event.nodeName === 'I'){
          event = event.parentNode;
        }
        event.blur();
      },
      gotoDetail(productId){// 去商品详情页
        this.$router.push(`/product/detail/${productId}`)
      },
      modifyProductState(index, productId, state){
        console.log(index, productId, state)
        state = state ^ 1
        modifyProductStateReq({productId: productId, state: state}).then(response =>{
          if (response.state === true) {
            this.page.list[index].state = state
            this.$notify.success({title: '成功',message: response.message, duration: 1500});
          }else{
            this.$notify.warning({title: '失败',message: response.message, duration: 1500});
          }
        })
      },
      handleClose(done) {
        this.$confirm('确认关闭？').then(_ => {done();}).catch(_ => {});
      },
    },
    filters: {
      categoryFilter(categoryId){
        switch (categoryId) {
          case 1 : return "手机";
          case 2 : return "电脑";
          case 3 : return "相机";
          case 4 : return "配件";
        }
      },
      // 时间戳转换成时间
      timestampToTime (timestamp) {
        let date = new Date(timestamp) //时间戳为10位需*1000，时间戳为13位的话不需乘1000
        let Y = date.getFullYear() + '-'
        let M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-'
        let D = date.getDate() + ' '
        let h = date.getHours() + ':'
        let m = date.getMinutes() + ':'
        let s = date.getSeconds()
        s = s < 10 ? '0' + s : s;
        return Y+M+D+h+m+s;
      },
    },
    beforeMount (){//初始化数据
      this.init();
    },
    mounted(){
    },
  }
</script>

<style scoped>

  .header-container{
  }

  @media (max-width: 1100px){
    .media-display{
      display: none;
    }
  }
  @media (max-width: 1200px){
    .media-display{
      display: none;
    }
  }



  .el-form{
    width: auto;
  }
  *{
    outline: none;
  }

  .el-card__header{
    background-color: rgba(0,0,0,.03);
  }
  .el-card__body{
    padding-top: 0;
  }
  .clearfix{
    display: flex;
    align-items: center;
  }
  .text {
    font-size: 14px;
  }
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  tr{
    height: 60px;
  }
  .demo-table-expand {
    font-size: 0;
  }
  >>> .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
  .el-form--inline .el-form-item__content{
    vertical-align: baseline;
  }
  .el-switch__label{
    color: #909399;
  }

  /*重写switch的disabled时css*/
  >>>.el-switch.is-disabled{
    opacity: 1;
  }
  >>>.el-switch.is-disabled .el-switch__core, .el-switch.is-disabled .el-switch__label{
    cursor: pointer;
  }

  .switch-disabled{
    cursor: no-drop;
  }

  .el-form-item{
    margin-bottom: 0;
  }
</style>
